<template>
  <div class="LoginPage">
    <div class="LoginPageTOP">
      <!-- 顶部 -->
      <div class="LoginPageH">
        <router-link class="LoginPageLink" to="/Mine"></router-link>京东登录注册
      </div>
      <!-- 手机号 -->
      <div class="PhoneNumber">
        <div class="PhoneNumberText">
          <div class="PhoneNumberTextbutton">
            <span>+86</span>
            <i></i>
          </div>
          <input type="text" placeholder="请输入手机号" />
        </div>
        <div class="PhoneNumberText2">
          <input type="text" placeholder="请输入收到的验证码" />
          <button>获取验证码</button>
        </div>
      </div>
      <!-- 登录 -->
      <div class="loginButton">登 录</div>
      <div class="Loginbutton">一键登录</div>
      <p class="FunctionalOptions">
        <span>账号密码登录</span>
        <span>手机快速注册</span>
      </p>
      <!-- 其他方式登录 -->
      <div class="OtherLogin">
        <i class="OtherLogin1"></i>其他方式登录
        <i class="OtherLogin2"></i>
      </div>
      <div class="RelatedProducts">
        <div v-for="{id,imgUrl,title} in RelatedProducts" :key="id">
          <i>
            <img :src="imgUrl" />
          </i>
          <span>{{title}}</span>
        </div>
      </div>
      <div class="FooterNode">
        未注册的手机号验证后将自动创建京东账号,登录即代表您已同意
        <span>京东隐私政策</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      RelatedProducts: [],
    };
  },
  created() {
    this.getRelatedProducts();
  },
  methods: {
    async getRelatedProducts() {
      const {
        data: { data },
      } = await this.api.getRelatedProducts();
      this.RelatedProducts = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.LoginPage {
  .LoginPageTOP {
    height: 590px;
    padding: 0px 25px 25px 25px;
    .LoginPageH {
      height: 44px;
      font-size: 17px;
      text-align: center;
      line-height: 44px;
      position: relative;
      > .LoginPageLink {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(../../public/uploads/Lleft.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: 10px;
        left: 0px;
      }
    }
    .PhoneNumber {
      height: 120px;
      margin-top: 20px;
      .PhoneNumberText {
        height: 29px;
        padding: 10px 0px;
        line-height: 29px;
        display: flex;
        border-bottom: 0.01rem solid #efefef;
        .PhoneNumberTextbutton {
          width: 72px;
          text-align: left;
          position: relative;
          > i {
            display: inline-block;
            width: 14px;
            height: 6px;
            background: url(../../public/uploads/Lbottom.png) no-repeat;
            background-size: 100%;
            position: absolute;
            top: 13px;
            left: 40px;
          }
        }
        > input {
          outline: none;
          border: none;
          font-size: 16px;
        }
      }
      .PhoneNumberText2 {
        height: 29px;
        padding: 10px 0px;
        margin-top: 20px;
        border-bottom: 0.01rem solid #efefef;
        > input {
          outline: none;
          border: none;
          font-size: 16px;
        }
        > button {
          width: 110px;
          height: 23px;
          color: #e2231a;
          font-size: 14px;
          border: none;
          border-left: 1px solid #ccc;
          background: none;
        }
      }
    }
    .loginButton {
      height: 50px;
      color: #fff;
      background-image: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
      text-align: center;
      line-height: 50px;
      margin-top: 15px;
      border-radius: 25px;
    }
    .Loginbutton {
      height: 50px;
      border-radius: 25px;
      border: 1px solid #ff2000;
      margin-top: 10px;
      text-align: center;
      line-height: 50px;
      color: #f10000;
    }
    .FunctionalOptions {
      margin-top: 20px;
      height: 19.2px;
      display: flex;
      justify-content: space-between;
      > span {
        color: rgba(0, 0, 0, 0.4);
        font-size: 14px;
      }
    }
    .OtherLogin {
      margin-top: 70px;
      height: 16px;
      color: rgba(0, 0, 0, 0.4);
      font-size: 12px;
      text-align: center;
      line-height: 12px;
      > .OtherLogin1 {
        display: inline-block;
        width: 92px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 20px;
      }
      > .OtherLogin2 {
        display: inline-block;
        width: 92px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 20px;
      }
    }
    .RelatedProducts {
      height: 69px;
      margin: 25px 0px 12px 0px;
      display: flex;
      justify-content: center;
      > div {
        width: 48px;
        height: 69px;
        margin: 0 15px;
        > i {
          display: inline-block;
          width: 48px;
          height: 48px;
          img {
            width: 100%;
          }
        }
        > span {
          display: inline-block;
          width: 48px;
          text-align: center;
          color: rgba(0, 0, 0, 0.4);
          font-size: 12px;
        }
      }
    }
    .FooterNode {
      margin-top: 15px;
      color: rgba(0, 0, 0, 0.3);
      font-size: 13px;
      text-align: center;
      > span {
        color: #4a90e2;
        font-size: 13px;
      }
    }
  }
}
</style>
